<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            padding: 0;
            margin: 0;
            list-style: none;
        }

        .fangda {
            width: 350px;
            height: 400px;
            margin: 100px;
            position: relative;
            border: 1px solid #ccc;
        }

        .fdtop {
            height: 350px;
        }

        .fdbottom {
            height: 50px;

        }

        .fdbottom ul {
            display: flex;
            justify-content: space-around;
        }

        .fdbottom ul li {
            height: 50px;
            width: 50px;
            float: left;
            border: 2px solid white;
        }

        .fdbottom ul li img {
            height: 50px;
        }

        .mask {
            height: 200px;
            width: 200px;
            background-color: yellow;
            opacity: 0.5;
            position: absolute;
            top: 0;
            left: 0;
            cursor: move;
            display: none;
            pointer-events: none;
        }

        .big {
            display: none;
            border: 1px solid #ccc;
            height: 500px;
            width: 500px;
            background-color: blue;
            position: absolute;
            top: 0;
            left: 380px;
            overflow: hidden;
        }

        .big img {
            position: absolute;
            top: 0;
            left: 0px;
            height: 800px;
        }
    </style>
</head>

<body>
    <div class="fangda">
        <div class="mask"></div>
        <div class="big"><img src="img/0.jpg" alt="" class="bigImg"> </div>
        <div class="fdtop"><img src="img/0.jpg" alt=""></div>
        <div class="fdbottom">
            <ul>
                <li><img src="img/0.jpg" alt=""></li>
                <li><img src="img/1.jpg" alt=""></li>
                <li><img src="img/2.jpg" alt=""></li>
                <li><img src="img/3.jpg" alt=""></li>
                <li><img src="img/4.jpg" alt=""></li>
            </ul>
        </div>

    </div>
    <script>
        // 获取元素
        var fangda = document.querySelector(".fangda");
        var fdtop = document.querySelector(".fdtop");
        var img = document.querySelector(".fdtop").querySelector("img");
        var big = document.querySelector('.big');
        var mask = document.querySelector('.mask');
        var bigImg = document.querySelector('.bigImg');
        var lis = document.querySelector('.fdbottom').querySelector('ul').querySelectorAll('li');

        for (let i = 0; i < lis.length; i++) {
            lis[i].onmouseenter = function () {
                img.src = `img/${i}.jpg`;
                big.querySelector('img').src = `img/${i}.jpg`
                for (let i = 0; i < lis.length; i++) {
                    lis[i].style.border = '';
                }
                lis[i].style.border = "2px solid red";

            }
        }
        fdtop.addEventListener('mouseover', function () {
            big.style.display = "block";
            mask.style.display = "block";
        })
        fdtop.addEventListener('mouseleave', function () {
            big.style.display = 'none';
            mask.style.display = 'none';
        })
        fdtop.addEventListener('mousemove', function (e) {
            var x = e.pageX - fdtop.getBoundingClientRect().x;
            var y = e.pageY - fdtop.getBoundingClientRect().y;
            var maskX = x - mask.getBoundingClientRect().x / 2;
            var maskY = y - mask.getBoundingClientRect().y / 2;
            if (maskX <= 0) {
                maskX = 0;
            } else if (maskX >= 150) {
                maskX = 150;
            } if (maskY <= 0) {
                maskY = 0;
            } else if (maskY >= 150) {
                maskY = 150;
            }
            mask.style.left = maskX + "px";
            mask.style.top = maskY + "px";
            bigImg.style.left = -maskX * 2 + "px";
            bigImg.style.top = -maskY * 2 + "px";
        })
    </script>
</body>

</html>